Component({
  /**
   * 组件的属性列表
   */

  properties: {
    // 城市列表
    list: {
      type: Array,
      value: [],
      observer: function (newVal) {
        if (newVal.length === 0) return;
        const data = this.data;
        const alphabet = data.list.map(item => item.letter);
        this.setData({
          alphabet
        }, () => {
          this.computedSize();
        })
      }
    },
    // 当前定位, 不设置不显示
    currentLocation: {
      type: String,
      value: '',
      observer: function (newVal) {
        if (newVal) {
          this.setData({
            current: newVal,
          })
        }

      }
    },
    // 历史记录, 不设置不会显示
    showHistory: {
      type: Boolean,
      value: true,
    },
    // 历史记录个数,.默认2
    historyLength: {
      type: Number,
      value: 2
    },
    // 热门城市
    hot: {
      type: Array,
      value: [],
      observer: function (newVal) {
        if (newVal) {
          const newHot = newVal.map((el) => {
            return this.findCity(el);
          });
          this.setData({
            hotList: newHot
          });
        }
      }
    }
  },

  lifetimes: {
    created() {

    },
    attached() {
      // 获取window高度, scroll-view必须设置高度,否则不支持自动滚动
      const {
        windowHeight
      } = wx.getSystemInfoSync();
      this.setData({
        windowHeight
      });

      if (this.data.showHistory) {
        const history = wx.getStorageSync('city-list-history') || [];
        this.setData({
          history
        });
      }
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    windowHeight: 612,
    alphabet: [],
    history: [],
    hotList: [],
    current: '',
    intoView: ''
  },



  /**
   * 组件的方法列表
   */
  methods: {
    findCity(cityName) {
      const list = this.data.list;
      for (let i = 0; i < list.length; i++) {
        const citys = list[i].list;
        for (let j = 0; j < citys.length; j++) {
          const city = citys[j];
          if (cityName == city.name || cityName == city.fullname) {
            return city;
          }
        }
      }
      return false;
    },
    choose(e) {
      const city = e.target.dataset.city;
      this.saveHistory(city);

      this.triggerEvent('choose', {
        city,
      });
    },
    // 保存到历史
    saveHistory(city) {
      let history = this.data.history;
      let index = history.findIndex((el) => el.id == city.id);

      console.log(index);
      if (index != -1) {
        history.splice(index, 1);
      }
      if (history.length >= this.data.historyLength) {
        history.splice(this.data.historyLength - 1, 1);
      }

      history.unshift(city);
      // 缓存到本地
      wx.setStorageSync('city-list-history', history);
      this.setData({
        history
      });
    },
    // 点击右侧sidebar
    handleSidebarTap(e) {
      const tapLetter = e.target.dataset.id;
      this.setData({
        intoView: tapLetter
      });
    },
    scrollTo(e) {
      const tapLetter = e.target.dataset.id;
      console.log("滑动中...", tapLetter, e);
      console.log(tapLetter);
      this.setData({
        intoView: tapLetter
      });
    },

    computedSize() {
      const data = this.data;
      const query = this.createSelectorQuery();
      // 计算右侧字母栏小区块的高度等信息
      query.select('.sidebar').boundingClientRect(rect => {
        console.log(rect);
        data._anchorItemH = rect.height / data.alphabet.length;
        data._anchorItemW = rect.width;
        data._anchorTop = rect.top;
      }).exec()
    },
  }
})